<template>
  <div>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="float: left; margin: 20px 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-search"></i>业务查询</div>
      </div></el-col>
    </el-row>
    <!--  查询条件-->
    <el-form :inline="true"  :model="queryForm" style="text-align: left; margin: 0 10%" ref="ruleForm">
      <el-form-item label="车牌号" prop="number">
        <el-input v-model="queryForm.number" placeholder="车牌号" clearable></el-input>
      </el-form-item>
      <el-form-item label="关联司机" prop="type">
        <el-input v-model="queryForm.anotherOne" placeholder="关联司机" clearable></el-input>
      </el-form-item>
      <el-form-item label="当前状态" prop="status">
        <el-select v-model="queryForm.carStatus" clearable placeholder="请选择">
          <el-option
            v-for="item in CarStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="getList" plain>查询</el-button>
        <el-button type="info" @click="resetForm()" plain>重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div style="float: left; margin: 0 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-s-unfold"></i>数据列表</div>
      </div></el-col>
    </el-row>
    <div id="s" class="animate__animated animate__zoomIn animate__delay-1s" style="margin-top: 20px">
    <!--  数据表格-->
    <el-table :default-sort="{prop: 'number', order: 'ascending'}" :data="tableData" stripe style="width: 100% " :border="true"
              :header-cell-style="{background:'#209e91', color:'#ffffff',textAlign:'center'}">
      <el-table-column
        label="序号"
        type="index"
        :index="indexAdd"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="number"
        label="车牌号"
        sortable
        align="center"
        width="300">
      </el-table-column>
      <el-table-column
        prop="type"
        align="center"
        width="300"
        label="车辆类型">
      </el-table-column>
      <el-table-column
        prop="baseDriver.driverName"
        label="关联司机"
        align="center">
      </el-table-column>
      <el-table-column
        prop="carStatus"
        label="当前状态"
        align="center"
        >
        <template slot-scope="scope">
          <div :style="{ color: scope.row.carStatus=='空闲' ? '#82B03F' : (scope.row.carStatus=='维保中' ? '#FF0000' :  '#FF9900') }">
            {{ scope.row.carStatus }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="location"
        label="当前位置"
        align="center"
        width="400">
      </el-table-column>
      <el-table-column
        label="操作"
        width="300">
        <template v-slot="scope" >
          <el-button type="text"  v-if="scope.row.carStatus==='空闲'" @click="distributeTask(scope.row)"  size="small"  >分配任务</el-button>
          <el-button type="text"  v-if="scope.row.carStatus!='空闲'"  @click="showTask(scope.row)"  size="small"  >查看任务</el-button>
          <el-button type="text"  @click="carDetail(scope.row)"  size="small"  >车辆详情</el-button>

        </template>
      </el-table-column>
    </el-table>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-light">
          <div style="margin: 20px"></div>
        </div></el-col>
      </el-row>
    <!--  分页-->
    <el-pagination
      @size-change="getList"
      @current-change="getList"
      :current-page.sync="queryForm.pageNum"
      :page-sizes="[5, 10, 20, 30, 60, 80, 100]"
      :page-size.sync="queryForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-light">
          <div style="margin: 20px"></div>
        </div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>


export default {
  name: "CarBusiness",
  data(){
    return {
      //共多少条
      total: 0,
      tableData:[],
      //查询对象
      queryForm: {
        pageNum: 1,
        pageSize: 5
      },
      CarStatusList: [

        {
          value: '空闲',
          label: '空闲'
        },
        {
          value: '任务待领取',
          label: '任务待领取'
        },
        {
          value: '待提货',
          label: '待提货'
        },
        {
          value: '待发车',
          label: '待发车'
        },
        {
          value: '运输中',
          label: '运输中'
        },
        {
          value: '维保中',
          label: '维保中'
        },
      ],
    }
  },
  methods: {
    //跳转车辆详情页，携带车辆基本信息

    carDetail(row){
      this.$store.commit('carDetail', row)
      this.$router.push('CarDetail')
    },
    showTask(row){
      //根据车辆信息查询带领取调度单，含orders
      row.carNumber=row.number
      row.pageSize=20

      console.log(row)
      this.$axios({
        url: 'dispatch/ticket/list',
        method: 'post',
        data: row
      }).then(res => {
        if (res.data.success) {
          console.log(res.data.object)
          this.$store.commit("currentDispatchTicket",res.data.object.list[0])
          this.$router.push("dispatchDetail")
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    distributeTask(row){
      console.log(row)
      this.$store.commit('carInfoToDistributeTask', row)
      this.$router.push("DispatchAdd")
    },
    indexAdd(index) {
      const page = this.queryForm.pageNum // 当前页码
      const pageSize = this.queryForm.pageSize // 每页条数
      return index + 1 + (page - 1) * pageSize
    },
    //搜索条件重置
    resetForm() {
      this.queryForm.number = ''
      this.queryForm.anotherOne = ''
      this.queryForm.carStatus = ''
    },
    //获取所有车辆基本信息
    getList() {
      this.$axios({
        url: 'car/list',
        method: 'post',
        data: this.queryForm
      }).then(res => {
        if (res.data.success) {
          this.tableData = res.data.object.list;
          this.total = res.data.object.total;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
  },
  created() {
    this.getList()
  },
}
</script>

<style scoped>
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
</style>
